<template>
	<view v-if="entity.exchangeGoodsId">
		<view style="height: 18upx;"></view>
		<view class="card-state">
			<image :src="`/static/order-icon-${entity.status}.png`" class="state-image"></image>
			<view class="row">
				<view>{{status[entity.status]}} </view>
				<view v-if="entity.status == '20'" :style="entity.type == '10' ? 'color: #FF2615;' : ''">
					· {{entity.type == '10' ? '待收货' : '待自提'}}
				</view>
			</view>
		</view>
		<view v-if="entity.type == '10'" class="card-address">
			<view class="address-text">{{entity.userAddress.name}} · {{entity.userAddress.phone}}</view>
			<view class="address-desc">
				{{entity.userAddress.provinceName}}{{entity.userAddress.cityName}}{{entity.userAddress.areaName}}{{entity.userAddress.address}}
			</view>
			<image src="/static/address-line@2x.png" mode="widthFix" class="address-line"></image>
		</view>
		<view v-else class="card-address">
			<view class="address-text">{{entity.sysOrganization.orgName}}</view>
			<view class="address-desc">{{entity.sysOrganization.remark}}</view>
			<image src="/static/address-line@2x.png" mode="widthFix" class="address-line"></image>
		</view>

		<view class="card-goods">
			<view class="card-content">
				<image :src="getImage(entity.goodsSpu.coverImg)" class="goods-image" mode="aspectFill"></image>
				<view class="goods-content">
					<view class="goods-name">{{entity.goodsSpu.name}}</view>
					<view class="tag-view">
						<view class="tag-item">{{entity.goodsSku.skuName}}</view>
					</view>
					<view class="goods-sum">
						<view class="number-view">
							<view>{{entity.goodsSku.redeemPoints}}</view>
							<view class="unit-text">积分</view>
						</view>
						<view class="sum-number">
							<view>x</view>
							<view class="number-text">{{entity.quantity}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cell-view">
				<view class="label-view">实付积分</view>
				<view class="value-view">{{entity.usePoints}}</view>
			</view>
			<view class="cell-view" style="flex-direction: column;align-items: flex-start;">
				<view class="label-view">备注信息</view>
				<view v-if="entity.remark" class="desc-view">{{entity.remark}}</view>
			</view>
		</view>

		<view class="card-cell">
			<view class="cell-view">
				<view class="label-view">订单编号</view>
				<view class="value-view">
					<view>{{entity.exchangeOrderId}}</view>
					<view class="division"></view>
					<view class="copy-text">复制</view>
				</view>
			</view>
			<view class="cell-view">
				<view class="label-view">创建时间</view>
				<view class="value-view">{{dateFormat(entity.exchangeTimes, 'YYYY-MM-DD HH:mm')}}</view>
			</view>
			<view v-if="entity.status > 10" class="cell-view">
				<view class="label-view">审核时间</view>
				<view class="value-view">{{dateFormat(entity.examineTimes, 'YYYY-MM-DD HH:mm')}}</view>
			</view>
			<view v-if="entity.status == 30" class="cell-view">
				<view class="label-view">审核说明</view>
				<view class="value-view">{{entity.description}}</view>
			</view>
			<view v-if="entity.deliveryTimes" class="cell-view">
				<view class="label-view">发货时间</view>
				<view class="value-view">{{dateFormat(entity.deliveryTimes, 'YYYY-MM-DD HH:mm')}}</view>
			</view>
			<view v-if="entity.completeTimes" class="cell-view">
				<view class="label-view">完成时间</view>
				<view class="value-view">{{dateFormat(entity.completeTimes, 'YYYY-MM-DD HH:mm')}}</view>
			</view>

		</view>
		<view style="height: 260upx;"></view>
		<FloatView v-if="entity.status == '10' || entity.status == '20'">
			<view class="button-view">
				<view v-if="entity.status == '10'" class="button-item" @click="onCancel">取消兑换</view>
				<view v-if="entity.status == '20'" class="button-item" @click="onConfirm">
					{{entity.type ? '确认自提' : '确认收货'}}
				</view>
			</view>
		</FloatView>
	</view>
</template>

<script>
	import orderStatus from '@/enum/orderStatus.js';
	export default {
		data() {
			return {
				status: orderStatus,
				detailId: '',
				entity: {
					status: '',
					exchangeGoodsId: ''
				}
			}
		},
		onLoad(options) {
			this.detailId = options.detailId
			this.getExchangeRecordDetail()
		},
		methods: {
			async onCancel() {
				const boo = await uni.$util.showModal('确定取消兑换码?')
				if (!boo) return
				uni.$util.showLoading()
				await uni.$api.goodsCancelExchangeOrder(this.detailId).finally(uni.finally)
				this.getExchangeRecordDetail()
				uni.$util.showSuccess()
			},
			async onConfirm() {
				const boo = await uni.$util.showModal('确认收货/自提吗?')
				if (!boo) return
				uni.$util.showLoading()
				await uni.$api.goodsConfirmReceipt(this.detailId).finally(uni.finally)
				this.getExchangeRecordDetail()
				uni.$util.showSuccess()
			},
			async getExchangeRecordDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getExchangeRecordDetail(this.detailId).finally(uni.finally)
				this.entity = res.data
				this.openerEvent(res.data)
			},
			getImage(coverImg) {
				const strArr = coverImg.split(',')
				if (!strArr.length) return ''
				return `${this.IMG_URL}${strArr.shift()}`
			},
		}
	}
</script>

<style scoped lang="scss">
	.card-state {
		width: 705rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 36upx 30upx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #B8ACA3;
		@extend .row-start;

		.state-image {
			width: 33upx;
			height: 33upx;
			margin-right: 14upx;
		}
	}

	.card-address {
		width: 705rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 45upx 36upx;
		position: relative;
		overflow: hidden;
		margin-top: 18upx;

		.address-text {
			width: 100%;
			font-size: 33rpx;
			font-weight: 600;
			color: #2C1101;
		}

		.address-desc {
			width: 100%;
			@extend .text-dot;
			font-size: 25rpx;
			font-weight: 400;
			color: #B8ACA3;
			margin-top: 11upx;
		}

		.address-line {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 115%;
		}
	}

	.card-goods {
		width: 705rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 22upx;
		margin-top: 18upx;

		.card-content {
			width: 100%;
			@extend .row-between;
			align-items: flex-start;
			margin-bottom: 18upx;

			.goods-image {
				width: 194upx;
				height: 194upx;
			}

			.goods-content {
				width: calc(100% - 212upx);

				.goods-name {
					width: 100%;
					font-size: 29rpx;
					font-weight: 400;
					color: #2C1101;
				}

				.tag-view {
					width: 100%;
					@extend .row-start;
					margin-top: 7upx;

					.tag-item {
						padding: 5upx 13upx;
						font-size: 18rpx;
						font-weight: 400;
						color: #FE5950;
						border: 1rpx solid #FE5950;
						border-radius: 12upx;
					}

				}

				.goods-sum {
					width: 100%;
					@extend .row-between;
					margin-top: 25upx;

					.number-view {
						@extend .row;
						align-items: baseline;
						font-size: 36rpx;
						font-weight: 600;
						color: #EC4725;


						.unit-text {
							font-size: 22rpx;
						}
					}

					.sum-number {
						@extend .row;
						align-items: baseline;
						font-size: 22rpx;
						font-weight: 400;
						color: #B7A09A;

						.number-text {
							font-size: 25rpx;
							color: #4D0F0B;
							margin-left: 7upx;
						}
					}
				}
			}
		}

		.cell-view {
			width: 100%;
			padding: 22upx 0;
			border-top: 1px solid #F7E8E4;
			@extend .row-between;

			.label-view {
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #69442E;
			}

			.value-view {
				font-size: 29rpx;
				font-weight: 600;
				color: #EC4725;
			}

			.desc-view {
				width: 100%;
				min-height: 170upx;
				padding: 29upx;
				background: #FAF6F3;
				border-radius: 14rpx;
				margin-top: 18upx;
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #B8ACA3;
			}
		}
	}

	.card-cell {
		width: 705rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 29upx;
		margin-top: 18upx;

		.cell-view {
			width: 100%;
			padding: 29upx 0;
			@extend .row-between;

			.label-view {
				font-size: 29rpx;
				font-weight: 400;
				color: #B8ACA3;
			}

			.value-view {
				@extend .row;
				font-size: 29rpx;
				font-weight: 400;
				color: #2C1101;

				.division {
					width: 1px;
					height: 20upx;
					background: #B8ACA3;
					margin: 0 14upx;
				}

				.copy-text {
					font-size: 29rpx;
					color: #EC4725;
				}
			}
		}

		.cell-view+.cell-view {
			border-top: 1px solid #F7E8E4;
		}
	}

	.button-view {
		width: 100%;
		padding: 0 22upx;
		@extend .row-end;

		.button-item {
			width: 324rpx;
			height: 91rpx;
			@extend .column;
			background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
			border-radius: 45rpx;
			font-weight: 500;
			font-size: 29rpx;
			color: #FFFFFF;
		}
	}
</style>